<template>
	<div class="zzgk">
		<el-row class="row-container">
			<el-col class="row-item" :span="7">
				<div class="row-content angerbg" @click="itemClick">
					<div class="left-box">
						<div class="icontitle flex-center-between">
							<p>
								<img
									src="../assets/img/镰刀斧头.png"
									alt=""
								/>******党组织
							</p>
							<p>
								<span
									><CountTo
										:startVal="0"
										:endVal="4"
										:duration="1000" /></span
								>个
							</p>
						</div>
						<table border="1" align="center">
							<tr>
								<th>类型</th>
								<th>基层党组织数</th>
								<th>党委</th>
								<th>党总支</th>
								<th>党支部</th>
							</tr>
							<tr>
								<td>**</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
								<td>0</td>
							</tr>
							<tr>
								<td>**</td>
								<td>2</td>
								<td>1</td>
								<td>1</td>
								<td>0</td>
							</tr>
							<tr>
								<td>***</td>
								<td>0</td>
								<td>2</td>
								<td>2</td>
								<td>0</td>
							</tr>
							<tr>
								<td>***</td>
								<td>2</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
							</tr>
						</table>
					</div>
					<div class="line-row"></div>
					<div class="left-box">
						<div class="icontitle flex-center-between">
							<p>
								<img
									src="../assets/img/镰刀斧头.png"
									alt=""
								/>******党组织
							</p>
							<p><span></span></p>
						</div>
						<div class="flex-center-between color-fff size-18">
							<div class="sub flex-center-between">
								<div class="type">机关单位</div>
								<div class="num flex align-center">
									<span class="color-num size-30"
										><CountTo
											:startVal="0"
											:endVal="4"
											:duration="1000"
									/></span>
									个
								</div>
							</div>
							<div
								class="line-column"
								style="height: 32rem"
							></div>
							<div class="sub flex-center-between">
								<div class="type">事业单位</div>
								<div class="num flex align-center">
									<span class="color-num size-30"
										><CountTo
											:startVal="0"
											:endVal="1"
											:duration="1000"
									/></span>
									个
								</div>
							</div>
						</div>
						<table border>
							<tr>
								<th>类型</th>
								<th>基层党组织数</th>
								<th>党委</th>
								<th>党总支</th>
								<th>党支部</th>
							</tr>
							<tr>
								<td>**</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
								<td>0</td>
							</tr>
							<tr>
								<td>**</td>
								<td>2</td>
								<td>1</td>
								<td>1</td>
								<td>0</td>
							</tr>
						</table>
					</div>

					<div class="line-row"></div>
					<div class="left-box">
						<div class="icontitle flex-center-between">
							<p>
								<img
									src="../assets/img/镰刀斧头.png"
									alt=""
								/>******党组织
							</p>
							<p>
								<span
									><CountTo
										:startVal="0"
										:endVal="2"
										:duration="1000" /></span
								>个
							</p>
						</div>
						<table border>
							<tr>
								<th>类型</th>
								<th>基层党组织数</th>
								<th>党委</th>
								<th>党总支</th>
								<th>党支部</th>
							</tr>
							<tr>
								<td>**</td>
								<td>1</td>
								<td>0</td>
								<td>1</td>
								<td>0</td>
							</tr>
							<tr>
								<td>**</td>
								<td>2</td>
								<td>1</td>
								<td>1</td>
								<td>0</td>
							</tr>
						</table>
					</div>
				</div>
			</el-col>
			<el-col class="row-item" :span="10">
				<div class="row-content angerbg">
					<div class="centertop">
						<div class="bgtitle flex-center-between">
							<div class="titleleft color-fff size-22">
								先进党组织评定
							</div>
							<div class="titleright color-fff size-18">
								<span class="color-num"
									><CountTo
										:startVal="0"
										:endVal="1"
										:duration="1000" /></span
								>个
							</div>
						</div>
						<div class="centerimg">
							<img src="" alt="" />
						</div>
						<div class="pingding flex-center-center">
							<div class="pdleft flex flex-column justify-center">
								<div class="item">
									<div class="point"></div>
									<div class="name">
										县(市、区)级先进党组织
									</div>
									<div class="times"><span>1</span>次</div>
								</div>
								<div class="item">
									<div class="point"></div>
									<div class="name">暂无数据</div>
									<div class="times">
										<span></span>
									</div>
								</div>
								<div class="item">
									<div class="point"></div>
									<div class="name">暂无数据</div>
									<div class="times">
										<span></span>
									</div>
								</div>
							</div>
							<div class="line-column"></div>
							<div class="pdright" id="pingding"></div>
						</div>
					</div>
					<div class="line-row"></div>
					<div class="centerbottom">
						<div class="bgtitle flex-center-between">
							<div class="titleleft color-fff size-22">
								党组织基本信息
							</div>
							<div class="titleright size-18"></div>
						</div>
						<div class="xxlist flex-center-between">
							<div
								class="item flex-center-between flex-column color-fff size-18"
							>
								<p>组织数</p>
								<span class="color-num size-26"
									><CountTo
										:startVal="0"
										:endVal="19"
										:duration="1000"
								/></span>
							</div>
							<div class="line-column"></div>
							<div
								class="item flex-center-between flex-column color-fff size-18"
							>
								<p>党委数</p>
								<span class="color-num size-26"
									><CountTo
										:startVal="0"
										:endVal="6"
										:duration="1000"
								/></span>
							</div>
							<div class="line-column"></div>
							<div
								class="item flex-center-between flex-column color-fff size-18"
							>
								<p>总支数</p>
								<span class="color-num size-26"
									><CountTo
										:startVal="0"
										:endVal="4"
										:duration="1000"
								/></span>
							</div>
							<div class="line-column"></div>
							<div
								class="item flex-center-between flex-column color-fff size-18"
							>
								<p>支部数</p>
								<span class="color-num size-26"
									><CountTo
										:startVal="0"
										:endVal="9"
										:duration="1000"
								/></span>
							</div>
							<div class="line-column"></div>
							<div
								class="item flex-center-between flex-column color-fff size-18"
							>
								<p>党员数</p>
								<span class="color-num size-26"
									><CountTo
										:startVal="0"
										:endVal="26"
										:duration="1000"
								/></span>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col class="row-item" :span="7">
				<div class="row-content angerbg">
					<div class="rightbox">
						<div class="icontitle flex-center-between">
							<p>
								<img
									src="../assets/img/镰刀斧头.png"
									alt=""
								/>******党组织
							</p>
							<p>
								<span
									><CountTo
										:startVal="0"
										:endVal="1"
										:duration="1000" /></span
								>个
							</p>
						</div>
						<div class="rightbottom">
							<div
								class="leftnum flex-center-center flex-column color-fff size-20"
							>
								<div>企业总数</div>
								<div>
									<span class="color-num size-26"
										><CountTo
											:startVal="0"
											:endVal="1"
											:duration="1000" /></span
									>个
								</div>
							</div>
							<div class="chart" id="c1"></div>
						</div>
					</div>
					<div class="line-row"></div>
					<div class="rightbox">
						<div class="icontitle flex-center-between">
							<p>
								<img
									src="../assets/img/镰刀斧头.png"
									alt=""
								/>******党组织
							</p>
							<p>
								<span
									><CountTo
										:startVal="0"
										:endVal="5"
										:duration="1000" /></span
								>个
							</p>
						</div>
						<div class="rightbottom">
							<div
								class="leftnum flex-center-center flex-column color-fff size-20"
							>
								<div>社会组织总数</div>
								<div>
									<span class="color-num size-26"
										><CountTo
											:startVal="0"
											:endVal="5"
											:duration="1000" /></span
									>个
								</div>
							</div>
							<div class="chart" id="c2"></div>
						</div>
					</div>
					<div class="line-row"></div>
					<div class="rightbox">
						<div class="icontitle flex-center-between">
							<p>
								<img
									src="../assets/img/镰刀斧头.png"
									alt=""
								/>******党组织
							</p>
							<p>
								<span
									><CountTo
										:startVal="0"
										:endVal="8"
										:duration="1000" /></span
								>个
							</p>
						</div>

						<div class="rightbottom">
							<div class="leftsex flex-center-center">
								<div
									class="leftwrapper flex-center-center"
									v-for="(item, index) in sexData"
									:key="index"
								>
									<div
										class="inner"
										:style="{ height: item.value + '%' }"
									>
										<img :src="item.bg" alt="" />
									</div>
									<p class="size-20 color-fff">
										{{ item.value }}%
									</p>
								</div>
							</div>
							<div class="chart" id="ganbu"></div>
						</div>
					</div></div
			></el-col>
		</el-row>
		<el-dialog :visible.sync="dialogVisible" width="80%" append-to-body>
			<template slot="title">
				<div class="dialogtitle">
					<span class="el-icon-caret-right"></span>
					<span>这里是弹框的标题</span>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script>
import 'echarts-liquidfill/src/liquidFill.js'
import CountTo from 'vue-count-to'
export default {
	components: { CountTo },
	data() {
		return {
			C1: null,
			C2: null,
			C3: null,
			C4: null,
			current1: -1,
			current2: -1,
			data1: [{ value: 100, name: '党支部' }],
			data2: [
				{ value: 20, name: '党委' },
				{ value: 40, name: '党总支' },
				{ value: 20, name: '党支部' },
				{ value: 20, name: '党小组' },
			],
			pingdingdata: [{ value: 4, name: '优秀组织占比' }],
			sexData: [
				{
					sex: '男',
					value: 50,
					bg: require('../assets/img/m2.png'),
				},
				{
					sex: '女',
					value: 50,
					bg: require('../assets/img/f2.png'),
				},
			],
			dialogVisible: false,
		}
	},
	mounted() {
		this.chartInit()
		window.onresize = () => {
			this.C1.resize()
			this.C2.resize()
			this.C3.resize()
			this.C4.resize()
		}
	},
	methods: {
		chartInit() {
			const c1 = document.getElementById('c1')
			const c2 = document.getElementById('c2')
			const c3 = document.getElementById('pingding')
			this.C1 = this.$echarts.init(c1)
			this.C2 = this.$echarts.init(c2)
			this.C3 = this.$echarts.init(c3)
			this.C1.setOption({
				series: [
					{
						name: '',
						type: 'pie',
						radius: ['60%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								color: '#fff',
								fontWeight: 'bold',
								formatter: ['{b|{b}}', '{c|{c}%}'].join('\n'),
								rich: {
									b: {
										fontSize: 16,
										lineHeight: 22,
									},
									c: {
										fontSize: 24,
										lineHeight: 32,
									},
								},
							},
						},
						labelLine: {
							show: false,
						},
						data: this.data1,
					},
				],
			})
			this.C2.setOption({
				series: [
					{
						name: '',
						type: 'pie',
						radius: ['60%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								color: '#fff',
								fontWeight: 'bold',
								formatter: ['{b|{b}}', '{c|{c}%}'].join('\n'),
								rich: {
									b: {
										fontSize: 16,
										lineHeight: 22,
									},
									c: {
										fontSize: 24,
										lineHeight: 32,
									},
								},
							},
						},
						labelLine: {
							show: false,
						},
						data: this.data2,
					},
				],
			})
			this.C3.setOption({
				series: [
					{
						name: '',
						type: 'pie',
						radius: ['60%', '80%'],
						center: ['50%', '70%'],
						startAngle: 200,
						endAngle: 340,
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								color: '#fff',
								fontWeight: 'bold',
								formatter: ['{b|{b}}', '{c|{c}%}'].join('\n'),
								rich: {
									b: {
										fontSize: 16,
										lineHeight: 22,
									},
									c: {
										fontSize: 24,
										lineHeight: 32,
									},
								},
							},
						},
						labelLine: {
							show: false,
						},
						data: [{ value: 4, name: '优秀组织占比' }],
					},
				],
			})
			setInterval(() => {
				this.update()
			}, 2000)

			const ganbu = document.getElementById('ganbu')
			this.C4 = this.$echarts.init(ganbu)
			this.C4.setOption({
				//backgroundColor: '#0F224C', //背景色
				title: {
					text: '50%',
					textStyle: {
						fontSize: 20,
						color: '#fff',
					},
					subtext: '年轻干部',
					subtextStyle: {
						color: '#fff',
						fontSize: 16,
					},
					itemGap: 10,
					x: 'center',
					y: '35%',
				},
				series: [
					{
						type: 'liquidFill', //水位图
						radius: '80%', //显示比例
						center: ['50%', '50%'], //中心点
						amplitude: 10, //水波振幅
						data: [0.5, 0.5, 0.5], // data个数代表波浪数
						color: [
							{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#446bf5',
									},
									{
										offset: 1,
										color: '#2ca3e2',
									},
								],
								globalCoord: false,
							},
						], //波浪颜色
						backgroundStyle: {
							borderWidth: 1, //外边框
							color: 'transparent', //边框内部填充部分颜色
						},
						label: {
							//标签设置
							// position: ['50%', '45%'],
							formatter: '', //显示文本,
							// textStyle: {
							// 	fontSize: '24px', //文本字号,
							// 	color: '#fff',
							// },
						},
						outline: {
							// show: false
							borderDistance: 0,
							itemStyle: {
								borderWidth: 2,
								borderColor: 'rgb(3,131,254)',
							},
						},
					},
				],
			})
		},
		update() {
			//这里还需要取消掉echarts自带的hover事件
			this.current1 = (this.current1 + 1) % this.data1.length
			this.current2 = (this.current2 + 1) % this.data2.length
			this.C1.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: this.current1,
			})
			this.C1.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				dataIndex:
					(this.current1 + this.data1.length - 1) % this.data1.length,
			})
			this.C2.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: this.current2,
			})
			this.C2.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
				dataIndex:
					(this.current2 + this.data2.length - 1) % this.data2.length,
			})
		},
		itemClick() {
			this.dialogVisible = true
		},
	},
}
</script>
<style lang="less" scoped>
.zzgk {
	width: 100%;
	height: 100%;
	.row-content {
		&:hover {
			cursor: pointer;
			background-color: rgba(255, 255, 255, 0.5);
		}
	}
	.left-box {
		&:nth-child(1) {
			height: 38%;
		}
		&:nth-child(3) {
			height: 34%;
			table {
				height: calc(80% - 85rem);
			}
		}
		&:nth-child(5) {
			height: 23%;
		}
		.sub {
			width: calc(50% - 15rem);
			height: 80rem;
		}
		table {
			border-collapse: collapse;
			border: solid 1px rgb(68, 98, 161);
			color: #fff;
			text-align: center;
			line-height: 44rem;
			width: 100%;
			font-size: 16rem;
			height: 80%;
			th {
				background: rgb(13, 17, 91);
			}
			tr {
				&:nth-child(even) {
					background: rgb(41, 46, 116);
				}
				&:nth-child(odd) {
					background: rgb(32, 37, 106);
				}
			}
		}
	}
	.rightbox {
		height: 32%;
		.rightbottom {
			width: 100%;
			height: 80%;
			display: flex;
			.leftnum {
				width: 50%;
				height: 100%;
			}
			.leftsex {
				width: 50%;
				height: 100%;
				.leftwrapper {
					width: 80px;
					height: 150px;
					margin: 0 4px;
					background-size: 80px 150px;
					position: relative;
					&:first-child {
						background-image: url(../assets/img/m1.png);
					}
					&:last-child {
						background-image: url(../assets/img/f1.png);
					}
					.inner {
						width: 100%;
						overflow: hidden;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: -1;
						img {
							display: block;
							width: 80px;
							height: 150px;
							position: absolute;
							left: 0;
							bottom: 0;
						}
					}
				}
			}
			.chart {
				width: 50%;
				height: 100%;
			}
		}
	}
	.centertop {
		height: 73%;
		.centerimg {
			width: 100%;
			height: 55%;
			background: lightblue;
		}
		.pingding {
			height: calc(45% - 90rem);
			.pdleft {
				width: 70%;
				height: 100%;
				.item {
					display: flex;
					align-items: center;
					position: relative;
					height: 30%;
					.point {
						width: 8rem;
						height: 8rem;
						border-radius: 50%;
						background: #61dff9;
					}
					.name {
						color: #fff;
						font-size: 20px;
						position: absolute;
						left: 15px;
					}
					.times {
						font-size: 20px;
						color: #ccc;
						position: absolute;
						right: 20px;
						display: flex;
						align-items: center;
						span {
							color: #61dff9;
							font-size: 26px;
						}
					}
				}
			}
			.pdright {
				width: calc(30% - 2px);
				height: 100%;
			}
		}
	}
	.centerbottom {
		height: 21%;
		.xxlist {
			height: calc(100% - 90rem);
			.item {
				span {
					margin-top: 10px;
				}
			}
		}
	}
}
</style>